<template>
  <page-container boxBackground="transparent" :base-tab="1" :shownav="true" navtitle="活动专区" :istabbox="true">
    <div class="content_container">
      <div style="margin-bottom: 20rpx">
        <u-search @search="getDoingCards" placeholder="请输入关键字" v-model="keyword" :showAction="false"></u-search>
      </div>
      <div v-for="item in cardListData" :key="item.id">
        <DoingsCard class="doings_card"
                    :cardData="item"
        ></DoingsCard>
      </div>
      <view class="button_pot" @click="junmpMySelfEvent">
        <span>我的</span>
        <span>活动</span>
      </view>
    </div>
  </page-container>
</template>
<script>

import DoingsCard from "../../components/doingsCard/index.vue";
import {getQueryHeaders, requestGet} from "@/util/means/request";
import {eventDetailsPage, eventsMySelfPage} from "@/util/publicConfig";
import {baseMixins} from "@/util/baseMixins";
export default {
  name: "index",
  components:{
    DoingsCard,
  },
  mixins:[baseMixins],
  data() {
    return {
      activityTargetType:"",
      keyword:'',
      eventDetailsPage,
      cardListData:[

      ],
    }
  },
  onLoad() {
    //获取用户信息
    this.activityTargetType = this.$store.state.$userInfo.id;
    //获取活动信息
    this.getDoingCards();
  },

  methods: {
    getDoingCards(){
      let params = {
        keyword:this.keyword,
        activityTargetType:this.activityTargetType,
        pageNo:1,
        pageSize:200
      }
      requestGet({url: "/activity/queryActivity", data: params,header:getQueryHeaders()}).then(res => {

        this.cardListData = res.records;

      },err=>{
        console.log(err,'==============')
      })
    },

    junmpMySelfEvent(){
      this.goSubPage(`${eventsMySelfPage}`)
    }
  },
}
</script>

<style scoped lang="scss">


.content_container{
  width:100%;
  height: 100%;
  overflow: auto;
  padding-left: 30rpx;
  padding-top: 30rpx;
  padding-right: 30rpx;
  box-sizing: border-box;

  .doings_card{
    width: 100%;
    background-color: #FFFFFF;
    margin-bottom: 30rpx;
    border-radius:20rpx;
    padding-bottom:30rpx;
  }

  .button_pot{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    position: fixed;
    bottom:150rpx;
    right:30rpx;
    background:linear-gradient(to right,#E5A149,#E40606);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color:#FFFFFF;


  }
}
</style>
